<template>
  <cu-custom bg-color="bg-white text-black solid-bottom" is-back bg-image="">
    <template #backText>返回</template>
  </cu-custom>
  <div class="chat-box">
    <template v-for="(item, index) in talkList.data" :key="index">
      <div v-if="item.type == 1" class="is-robot mb-2">
        <div class="img"></div>
        <div class="content">
          <div ref="itemRefs"></div>
        </div>
      </div>
      <div v-if="item.type == 0" class="is-question">
        <div class="content">
          <div ref="itemRefs"></div>
        </div>
        <div class="img"></div>
      </div>
    </template>

    <div class="question-panel">
      <input v-model="question" />
      <button class="send" @click="talk">发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import { getToken, wxTalk } from "@/api/index";
import Typed from "typed.js";

const signature = ref("");
const question = ref("");
const talkList: any = ref({ data: [] });
const itemRefs = ref([]);
const init = async () => {
  let data: any = await getToken();
  signature.value = data.data;
};

const showTyped = (index: number, data: string) => {
  nextTick(() => {
    console.log(itemRefs.value, "itemRefs.value");
    let item = itemRefs.value[index];
    new Typed(item, {
      strings: [data],
      typeSpeed: 0,
      backSpeed: 50,
      showCursor: false,
    });
  });
};

const talk = async () => {
  talkList.value.data.push({
    type: 0,
    content: question.value,
  });
  showTyped(talkList.value.data.length - 1, question.value);
  let data: any = await wxTalk({
    signature: signature.value,
    query: question.value,
  });
  if (data.data) {
    talkList.value.data.push({
      type: 1,
      content: data.data[0].content || "对不起我还不明白这个问题",
    });
    showTyped(
      talkList.value.data.length - 1,
      data.data[0].content || "对不起我还不明白这个问题"
    );
  }
};

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.chat-box {
  width: 750rpx;
  height: calc(100vh - 45px);
  background: white;
  padding: 10px;
  position: relative;
}

.is-robot {
  display: flex;
  .img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: url("../../static/wx.jpg");
    background-size: 100% 100%;
    border: solid 1px #333;
  }
  .content {
    margin-left: 10rpx;
    padding: 10rpx;
    background-color: #ecf3fe;
    max-width: 500rpx;
    height: min-content;
    border-radius: 20rpx;
  }
}
.is-question {
  display: flex;
  justify-content: flex-end;
  .img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: url("../../static/sansan.jpg");
    background-size: 100% 100%;
    border: solid 1px #333;
  }
  .content {
    margin-right: 10rpx;
    padding: 10rpx;
    background-color: #ffe7ae;
    max-width: 500rpx;
    border-radius: 20rpx;
    height: min-content;
  }
}
.mb-2 {
  margin-bottom: 20rpx;
}
.question-panel {
  position: absolute;
  bottom: 10px;
  height: 80rpx;
  width: 750rpx;
  display: flex;
  align-content: center;
  left: 0;
  .color {
    line-height: 80rpx;
  }
  input {
    background-color: #f6f6f5;
    height: 80rpx;
    margin-left: 10rpx;
    width: 600rpx;
    border-radius: 20rpx;
  }
}
.send {
  font-size: 14rpx;
  line-height: 80rpx;
  background-color: aquamarine;
}
</style>
